<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Web_Workers</title>
	</head>
	<body>
		<!--
    web worker 是运行在后台的 JavaScript，不会影响页面的性能。

    什么是 Web Worker？
    当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
    web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

    web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
    -->

		<p>计数： <output id="result"></output></p>
		<button onclick="startWorker()">开始工作</button>
		<button onclick="stopWorker()">停止工作</button>

		<script>
			let w

			function startWorker() {
				if (typeof Worker !== 'undefined') {
					if (typeof w == 'undefined') {
						w = new Worker('./scripts/demo_workers.js')
					}

					// onmessage 事件处理程序用于接收 worker 线程发出的消息。
					w.onmessage = (event) => {
						document.getElementById('result').innerHTML = event.data
					}
				} else {
					document.getElementById('result').innerHTML = '抱歉！你的浏览器不支持 Web Worker！'
				}
			}

			function stopWorker() {
				// terminate() 方法用于关闭 worker，并释放相应的资源。
				w.terminate()
				document.getElementById('result').innerHTML = ''
				w = undefined
			}
		</script>
	</body>
</html>
